<template>
    <div class="wrapper-wrap" ref="box">
        <!-- 头部 -->
        <img src="../../../../static/images/content-header-bg.png" alt="" class="slide-bg slide-bg-header">
        <!-- 头部end -->

        <!-- 内容 -->
        <div class="wrapper">

            <!-- 已投票按钮 -->
            <div class="selection" @click="showPhonePoup">
                <div class="circle">
                    <div>已选</div>
                    <div><span>1</span>/5</div>
                </div>
                <div class="to">去投票</div>
                <img src="../../../../static/images/arrowD.png" alt="" class="arrowD">
            </div>
            <!-- 已投票按钮end -->

            <!-- 导航 -->
            <div class="fast-btn">
                <div class="tit">快速导航</div>
                <div class="num-wrapper">
                    <div @click="toFastBar(0)" :class="{'num-activity':numIndex==0}">01-09</div>
                    <div @click="toFastBar(1)" :class="{'num-activity':numIndex==1}">10-18</div>
                    <div @click="toFastBar(2)" :class="{'num-activity':numIndex==2}">19-27</div>
                    <div @click="toFastBar(3)" :class="{'num-activity':numIndex==3}">28-30</div>
                </div>
            </div>
            <!-- 导航end -->
            
            <img src="../../../../static/images/tips.png" alt="" class="tips">
            <img src="../../../../static/images/prizeBtn.png" alt="" class="prize-logo" v-if="hasOptenPrize">

            <!-- 投票列 -->
            <div class="item" v-for="(item,index) of listData" :key="index">
                <div>
                     <div class="item-tit">
                        <div class="divide"></div>
                        <div class="num" :ref="item.ref">编号 <span>{{item.num}}</span></div>
                    </div>
                    <div class="item-table">
                        <div class="item-cell-wrapper"   v-for="(item,index) of item.list" :key="index">
                            <div class="item-cell">
                                <img src="../../../../static/images/headerBg.png" alt="" class="item-cell-img" @click="showPrevPoup">
                                <div class="name">《 <span>哈哈啊多发点是发的哈哈啊</span> 》</div>
                                <div class="num">编号:<span>01-09</span></div>
                                <div class="author">作者: <span>欧阳修车</span></div>
                                <div class="btn">投TA!</div>
                            </div>
                        </div>

                    </div>
                </div>
                
                
                
            </div>
            <!-- 投票列end -->



            
        </div>
        <!-- 内容end -->

        <!-- 底部 -->
        <img src="../../../../static/images/content-footer-bg.png" alt="" class="slide-bg slide-bg-footer">
        <!-- 底部end -->


        <div class="btn-wrapper">
            <div class="submit" @click="showPhonePoup">
                想好了，确认投票！
            </div>
            <div class="toTop" @click="toTop">
                返回顶部
            </div>
        </div>



        
            <!-- 填写电话 -->
            <joinForm ref="phonePoup">
                <div class="popup">
                    <div class="header">

                        <img src="../../../../static/images/phoneH.png" alt="" class="header-bg">
                    </div>
                    <div class="desc">
                        从即日起至2020年2月8日，在“驿道同框” 晒图大赛排名前30的照片中，选取5张“我 最喜爱的照片”，为其点赞，就有机会参与抽奖活动,赢取<span>摄影器材</span>和<span>定制小礼品</span>。
                    </div>
                    <div class="tip">请输入您投票活动抽奖的手机号码</div>
                    <input type="phone" placeholder="填写手机号码" v-model="phone">
                    <button @click="submit">立即投票</button>
                </div>
                
            </joinForm>
            <!-- 填写电话end -->

            <!-- 投票弹窗 -->
            <joinForm ref="votePoup">
                <div class="popup">
                    <div class="tipsVote">请确认是否投票?</div>
                    <button @click="voteConfirm">确定</button>
                </div>  
            </joinForm>
            <!-- 投票弹窗end -->

            <!-- 预览图片 -->
            <joinForm ref="prevPoup">
                <div class="prevWrapper">
                    <img src="../../../../static/images/phoneH.png" alt="" class="img" @click="prevImgHandle">
                    <div class="name">《 <span>哈哈啊多发点是发的哈哈啊</span> 》</div>
                    <div class="prevBottom">
                        <div class="num">编号:<span>01-09</span></div>
                        <div class="author">作者: <span>欧阳修车</span></div>
                    </div>
                </div>  
            </joinForm>
            <!-- 预览图片end -->



        <!-- 中奖填写资料弹窗 -->
            <joinForm ref="addressPoup">
                <div class="popup">
                    <div class="header">

                        <img src="../../../../static/images/phoneH.png" alt="" class="header-bg">
                    </div>
                    <div class="desc">
                              恭喜您本次摄影投票活动中成为了幸 运儿抽中了<span>XXXXXXXXX</span>，请在下方填写您 的奖品邮寄地址。
                    </div>
                    <div class="tip">请输入你的姓名</div>
                    <input type="phone" placeholder="填写姓名" v-model="realname">
                    <div class="tip">请输入奖品邮寄地址</div>
                    <textarea  placeholder="输入奖品邮寄地址" v-model="address"></textarea>
                    <button @click="submit">我已确认填写无误</button>
                </div>
                
            </joinForm>
        <!-- 中奖填写资料弹窗end -->


            <!-- 确认弹窗 -->
            <joinForm ref="thankPoup">
                <div class="popup">
                    <div class="tipsVote">{{tips}}</div>
                    <button @click="thankConfirm">确定</button>
                </div>  
            </joinForm>
            <!--确认弹窗end -->
    </div>
</template>
<script>
import { Popup, ImagePreview} from 'vant';
import joinForm  from '@/components/joinForm';

export default {
    name:'activity',
    data(){
        return{
            tips:'谢谢您参与本次投票活动！',
            hasOptenPrize:false,//是否已开奖
            listData:[],
            phone:'',
            realname:'',
            address:'',
            numIndex:''//快速导航的索引
        }
    },
    components:{
        joinForm
    },
    methods: {
        toFastBar(num){
            //快速导航
            this.numIndex=num;
            let id=`id${num}`;
            // document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
            let offsetTop=this.$refs[id][0].offsetTop;
            let box=document.documentElement||document.body||window.pageYOffset

            box.scrollTop=offsetTop;
        },
        toTop(){
            let box=document.documentElement||document.body||window.pageYOffset

            box.scrollTop=0;
        },
        showPhonePoup(){
            //显示填写手机弹窗
            this.$refs.phonePoup.$data.show=true
        },
        showVotePopup(){
            //显示确认投票弹窗
            this.$refs.votePoup.$data.show=true
        },
        showPrevPoup(){
            //显示预览图片弹窗
            this.$refs.prevPoup.$data.show=true
        },
        voteConfirm(){
            //点击投票确认按钮
        },
        submit(){
            //点击手机投票按钮
            console.log(this.phone)
        },
         showAddressPoup(){
            //显示填写地址弹窗
            this.$refs.addressPoup.$data.show=true
        },
        showMailePoup(){
            //确认地址弹窗
            this.$refs.mailPoup.$data.show=true
        },
        mailConfirm(){
            this.$refs.mailPoup.$data.show=false
        },
        showThankPoup(){
            //确认地址弹窗
            this.$refs.thankPoup.$data.show=true
        },
        thankConfirm(){
            this.$refs.thankPoup.$data.show=false
        },
        prevImgHandle(){
            ImagePreview([
            'https://img.yzcdn.cn/1.jpg',
            'https://img.yzcdn.cn/2.jpg'
            ]);
        },
        mockListData(){
            //模拟数据
            let _this=this
            this.listData=
            [
                {   ref:'id0',
                    num:'01-09',//编号
                    list:[0,1,2,3,4,5,6,7,8]//数据
                },
                {   
                    ref:'id1',
                    num:'10-18',//编号
                    list:[0,1,2,3,4,5,6,7,8]//数据
                },
                {   
                    ref:'id2',
                    num:'19-27',//编号
                    list:[0,1,2,3,4,5,6,7,8]//数据
                },
                {   
                    ref:'id3',
                    num:'28-30',//编号
                    list:[0,1,2]//数据
                }
            ]
        }
    },
    mounted() {
        this.mockListData()

    },
}
</script>
<style lang="scss" scoped>
    .wrapper-wrap{
        // font-size: 0;
        background-image: url('../../../../static/images/contentBg.png');
        padding-bottom: 50px;
    }

    .btn-wrapper{
        font-size: 30px;
        font-weight: 600;
        color:#fff;
        .submit{
            height: 100px;
            line-height: 100px;
            background-image: url('../../../../static/images/submit.png');
            background-size: 100% 100%;
            margin:30px 80px;

        }
        .toTop{
            height: 80px;
            line-height: 80px;
            margin:0 100px;
            background-image: url('../../../../static/images/toTop.png');
            background-size: 100% auto;
        }
    }
    .prize-logo{
        width: 80vw;
    }
    //已投票按钮
    .selection{
        background-color: #ffe880;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        position: fixed;
        top:40vh;
        z-index: 10;
        left:0;
        .circle{
            margin-top:-60px;
            font-size: 30px;
            border-radius: 50%;
            background-color: #ff7129;
            border:4px solid #fff;
            width: 100px;
            height: 100px;
            color:#fff;
            span{
                color:#ffde00;
            }
        }
        .to{
            color:#ff7129;
        }
        .arrowD{
            width: 30px;
            height: 20px;
        }
    }

    //中间内容
    .wrapper{
        background: url('../../../../static/images/content-bg.png');
        background-size: 100% auto;
        font-size: 24px;
    }
    .slide-bg{
        width: 100%;
        display: inline-block;
    }
    .slide-bg-header{
        position: relative;
        top:10px;
    }
    .slide-bg-footer{
        position: relative;
        top:-30px;
    }
    .tips{
        width: 90%;
    }

    //快速导航
    .fast-btn{
        font-size: 28px;
        display: flex;
        align-items: center;
        color:#ff7129;
        height: 100px;
        position: sticky;
        background-image: url('../../../../static/images/content-bg.png');
        background-size: 100% auto;
        top:0;
        
        padding:0 40px;
        font-weight: 600;
        .tit{
            
        }
        .num-wrapper{
            margin-left:30px;
            flex:1;
            justify-content: space-around;
            display: flex;
            align-items: center;
            div{
                padding:5px 25px;
                
                border:2px solid #ff7129;
                border-radius: 10px;
            }
        }
        .num-activity{
            background-color: #ff7129;
            color:#fff;
        }
    }

    .item{
        //投票头部
        // margin:20px 30px;
        &:last-of-type{
            padding-bottom: 40px;
        }
        .item-tit{
            margin:20px 40px;
            text-align: left;
            font-size: 30px;
            display: flex;
            align-items: center;
            .divide{
                background-color: #ff7229;
                border-radius: 20prx;
                width: 10px;
                height: 30px;
                margin-right: 10px;
            }
            .num{
                font-weight: 600;
                span{
                    
                    color: #ff7229;
                    display: inline-block;
                    margin-left: 20px;
                    font-weight: 400
                }
            }
        }

        //列表
        .item-table{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin:20px 20px;
            .item-cell-wrapper{
                width: 30%;
                display: flex;
                justify-content: center;
                align-items: center;
                .item-cell{
                    width: 100%;
                    background-color: #fff;
                    padding:5px;
                    box-sizing: border-box;
                    border-radius: 10px;
                    .item-cell-img{
                        width: 100%;
                        height: 200px;
                        object-fit: cover;
                        border-radius: 10px;
                    }
                    .name{
                        display: flex;
                        align-items: center;
                        span{
                            max-width: 80%;
                            display: inline-block;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                    .num,.author{
                        font-weight: 600;
                        margin:10px 0 10px 20px;
                        text-align: left;
                        span{
                            
                            color: #ff7229;
                            display: inline-block;
                            margin-left: 20px;
                            font-weight: 400
                        }
                    }
                    .num{
                        
                    }
                    .btn{
                        color:#fff;
                        font-weight: 600;
                        border-radius: 10px;
                        font-size: 30px;
                        background-color: #ff7229;
                    }
                    .btn-activity{
                        background-color: #e84419;
                        
                    }
                }
            }
            
        }
    }

    //弹窗
    .popup{
        .desc{
            text-align: left;
            padding: 10px;
            margin:20px 0;
                line-height: 30px;
                font-size: 24px;
                span{
                    color:#e84419
                }
            }
        .tip{
            text-align: left;
            padding: 10px;
            margin:20px 0;
        }
        .tipsVote{
            text-align: center;
            font-weight: 600;
            font-size: 30px;
            margin:30px 0;
        }
        input{
            border:none;
            padding: 10px;
            box-sizing: border-box;
            width: 100%;
            margin:20px 0;
            height: 50px;
            line-height: 50px;
        }
        button{
            color:#fff;
            font-weight: 600;
            background-color: #e84419;
            border-radius: 20px;
            padding: 20px 0;
            box-sizing: border-box;
            width: 90%;
            margin:20px 0;
        }
    }


    //预览图片弹窗
    .prevWrapper{
        padding:20px;
        .img{
            width: 100%;
            height: 300px;
            object-fit: cover;
        }
        .name{
            font-weight: 600;
            font-size: 30px;
            text-align: left;
        }
        .prevBottom{
            display: flex;
            align-items: center;
            span{
                color:#e84419
            }
            div{
                margin: 20px
            }
        }
    }
</style>